import React, { useState } from 'react';
import { useEffect } from 'react';
import EnumSelect from '@/component/EnumSelect';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { refer } from '@/component';
import { Button, Col, Form, Input, Row, Select, theme } from 'antd';

export default function Search(props: any) {
    useEffect(() => {
        
    }, []);
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);
    const onFinish = (data: any) => {
        console.log(data);
    }

    const onSearch = () => {
        refer['demoList'].search()
    }

    const renderMoreItem = () => {
        return (
            <>
                <Col span={6}>
                    <Form.Item
                        name='age'
                        label='年龄'
                        rules={[
                            {
                                required: true,
                                message: 'Input something!',
                            },
                        ]}
                    >
                        <EnumSelect placeholder="请选择" />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        name='area'
                        label='地区'
                        rules={[
                            {
                                required: true,
                                message: 'Input something!',
                            },
                        ]}
                    >
                        <EnumSelect placeholder="请选择" />
                    </Form.Item>
                </Col>
            </>
        );
    }
    return (
        <Form form={form} name="advanced_search" style={{ background: 'rgba(0, 0, 0, 0.02)', padding: 16 }} onFinish={onFinish}>
            <Row gutter={24}>
                <Col span={6}>
                    <Form.Item name={'name'}
                        label='姓名'
                        rules={[
                            {
                                required: true,
                                message: 'Input something!',
                            },
                        ]}
                    >
                        <Input placeholder="placeholder" />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item name='sex'
                        label='性别'
                        rules={[
                            {
                                required: true,
                                message: 'Input something!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入性别" />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        name='age'
                        label='年龄'
                        rules={[
                            {
                                required: true,
                                message: 'Input something!',
                            },
                        ]}
                    >
                        <Input placeholder="placeholder" />
                    </Form.Item>
                </Col>
                {
                    expand ? renderMoreItem() : null
                }
            </Row>
            <Row>
                <Col span={24} style={{ textAlign: 'right' }}>
                <Button type="primary" htmlType="submit" onClick={onSearch}>
                    Search
                </Button>
                <Button
                    style={{ margin: '0 8px' }}
                    onClick={() => {
                    form.resetFields();
                    }}
                >
                    Clear
                </Button>
                <a style={{ fontSize: 12 }} onClick={() => { setExpand(!expand); }}>
                    {expand ? <span><UpOutlined /> 收起</span>: <span><DownOutlined /> 展开</span>}
                </a>
                </Col>
            </Row>
        </Form>
    );
}
